// src/components/BottomModal.tsx
import React from 'react';
import { View, Image, Text } from '@tarojs/components';
import './index.less';

interface CommonPopupProps {
  /** 是否显示 */
  visible: boolean;
  /** 关闭回调 */
  onClose: () => void;
  /** 自定义内容区域 */
  content?: React.ReactNode;
  /** 标题文字，仅当 full=false 时生效 */
  title?: string;
  /** 是否显示自定义头部；true 时 content 占满整个弹窗，false 时显示默认头部 */
  full?: boolean;
  /** 额外的 class .bm-container 上 */
  className?: string;
  /** 是否显示关闭按钮 */
  closeBtn?: boolean;
}

export default function CommonPopup({
  visible,
  onClose,
  full = false,
  title,
  content,
  className = '',
  closeBtn = true,
}: CommonPopupProps) {
  if (!visible) {
    return null;
  }

  return (
    <View className="bottom-modal">
      {/* 半透明遮罩 */}
      <View className="bm-mask" onClick={onClose} />
      {/* 弹窗容器 */}
      <View className={`${className} bm-container`}>
        {/* 关闭按钮 */}
        {closeBtn && (
          <View onClick={onClose}>
            <Image
              className="bm-close"
              src={'https://file.linkcook.cn/image/wineMiniProgram/close.png'}
            ></Image>
          </View>
        )}
        {!full && (
          <View className="bm-header">
            <Text className="bm-title">{title}</Text>
          </View>
        )}{' '}
        {/* 自定义内容 */}
        <View className="bm-content">{content}</View>
      </View>
    </View>
  );
}
